<template>
    <section>
        <el-table
                :data="tableData"
                v-loading="loading"
                :height="tableHeight"
                ref="crud"
                @sort-change="sortChange"
                :default-sort = "defaultSort"
                border
                style="width: 100%">
            <el-table-column
                    v-for="column of option.column"
                    v-if="needShowColumn(column)"
                    :sortable="false || column.sortable"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width || option.width">
            </el-table-column>
            <el-table-column
                    v-if="showOperation"
                    fixed="right"
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="detail(scope)" type="text" size="small">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="my-4 right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[20, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </section>
</template>

<script>
  export default {
    name: "drilling-table",
    props: {
      page: {
        type: Object,
        default: () => {
          return {
            current: 1,
            size: 20,
            total: 0
          }
        }
      },
      defaultSort: {
        type: Object,
        default: () => {
          return {}
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      showOperation: {
        type: Boolean,
        default: false
      },
      tableData: {
        type: Object,
        default: () => {
          return []
        }
      },
      option: {
        type: Object,
        default: () => {
          return {}
        }
      },
      drillingSelectorList: {
        type: Array,
        default: () => {
          return []
        }
      },
      sort: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        tableHeight: document.documentElement.clientHeight - 340
      }
    },
    methods: {
      needShowColumn(column) {
        if(!column.showColumnSelectorProp) {
          return true;
        }
        return this.drillingSelectorList.includes(column.showColumnSelectorProp);
      },
      handleSizeChange(val) {
        this.page.size = val;
        this.$emit("update:page", this.page);
        this.$emit("size-change", this.page);
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.$emit("update:page", this.page);
        this.$emit("current-change", this.page);
      },
      sortChange({ prop, order }) {
        if(this.sort && this.sort[prop]) {
          this.$emit("sort-change", {sortItem: toLine(this.sort[prop]), sort: order == "ascending" ? "asc" : "desc"})
        }else {
          this.$emit("sort-change", {sortItem: toLine(prop), sort: order == "ascending" ? "asc" : "desc"})
        }
      },
      detail(scope) {
        const row = scope.row;
        this.$router.push({
          path: "/youan/audit/search/origin",
          query: row
        });
      }
    }
  }

  // 驼峰转换下划线
  function toLine(name) {
    return name.replace(/([A-Z])/g,"_$1").toLowerCase();
  }

</script>

<style scoped>

</style>